
@import url( '//s1.wp.com/wp-includes/css/dashicons.css?v=20150727' );

.is-group-editor.layout {
	background-color: var( --color-surface );
}

.is-group-editor::before {
	content: '';
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: var( --color-surface );
	pointer-events: none;
	z-index: z-index( 'root', '.is-group-editor::before' );
}

.is-group-editor .sidebar {
	left: auto;
	right: -273px;
}

@include breakpoint-deprecated( '<660px' ) {
	.is-group-editor.focus-sidebar::before,
	.is-group-editor.focus-editor-confirmation-sidebar::before {
		background-color: var( --color-neutral-0 );
	}

	.is-group-editor .sidebar {
		right: auto;
	}
}

.is-group-editor .layout__content {
	padding: 47px 0 0;
	overflow: inherit;
}

.post-editor__inner {
	position: relative;
	padding-bottom: 47px;
}

.post-editor__content {
	position: relative;
	margin: 0;
	backface-visibility: hidden;
	perspective: 1000;
	display: none;

	.focus-content & {
		display: block;
	}

	@include breakpoint-deprecated( '>660px' ) {
		display: block;
		backface-visibility: visible;
		perspective: none;
	}
}

.post-editor__content {
	margin: 0 auto; // born centered, so when width collapses for sidebar anim it doesn't move
	left: 0;

	.focus-sidebar &,
	.focus-editor-confirmation-sidebar & {
		left: ( $sidebar-width-max / -2 );
		width: calc( 100% - ( #{$sidebar-width-max} ) ); // subtract sidebar width
	}
}

.post-editor__site {
	display: flex;
	margin-bottom: 16px;
	background: var( --color-neutral-0 );

	@include breakpoint-deprecated( '>660px' ) {
		display: none;
	}

	.site__content {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.site__title,
	.site__domain {
		&::after {
			@include long-content-fade( $color: var( --color-neutral-0-rgb ) );
		}
	}

	.editor-status-label {
		text-align: right;
		align-self: center;
		margin-right: 8px;
	}
}

.post-editor__header,
.post-editor .mce-container-body,
.post-editor .tinymce {
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}

.focus-content .post-editor__header {
	@include breakpoint-deprecated( '>660px' ) {
		width: 700px;
	}
}

.post-editor__header,
.post-editor .mce-edit-area {
	box-sizing: border-box;
	padding: 0 16px;

	@include breakpoint-deprecated( '>1040px' ) {
		padding: 0;
	}
}

// Component <Editor>
.post-editor__content-editor {
	position: relative;
}

/*
 * Constrain the `MediaLibraryDropZone` to the editor content area, instead of taking up the entire
 * screen. This allows room for the `FeaturedImageDropZone`.
 *
 * It's only done while an image is actively being dragged, because it interferes with TinyMCE
 * toolbar pinning/unpinning.
 */
.post-editor__content-editor .editor-featured-image.has-active-drop-zone ~ div.tinymce-container {
	position: relative;
}

.post-editor .tinymce-container.editor-mode-tinymce .drop-zone.is-active {
	top: 75px; /* Move it below the TinyMCE toolbar, because it looks bad when they overlap */
}

.post-editor .tinymce-container.editor-mode-html .drop-zone.is-active {
	top: 40px; /* Move it below the TinyMCE toolbar, because it looks bad when they overlap */
}

.post-editor .tinymce {
	min-height: 100vh;
	resize: none;
	border-width: 0;
	padding: 32px 11px; /* Inherited from TinyMCE iframe body */

	// typography for HTML view
	font-family: $monospace;
	font-size: $font-body-small;
	margin-bottom: 64px;

	@include breakpoint-deprecated( '<480px' ) {
		padding: 24px 27px; /* 27px = 16px + the 11px padding on Visual mode */
		margin-bottom: 0;
	}

	&:focus {
		border-color: var( --color-neutral-10 );
		box-shadow: none;
	}
}

.post-editor__header {
	position: relative;
	padding-bottom: 27px;
}

.post-editor__switch-mode {
	position: absolute;
	right: 16px;
	width: 160px;
	z-index: z-index( 'root', '.post-editor__switch-mode' );

	@include breakpoint-deprecated( '>960px' ) {
		right: 32px;
	}

	@include breakpoint-deprecated( '>1040px' ) {
		right: 0;
	}
}

.post-editor__switch-mode .segmented-control__item {
	&:first-of-type {
		.segmented-control__link {
			border-bottom-left-radius: 0;
		}
	}

	&:last-of-type {
		.segmented-control__link {
			border-right-color: var( --color-neutral-10 );
			border-bottom-right-radius: 0;
		}
	}

	&.is-selected {
		+ .segmented-control__item .segmented-control__link {
			border-left-color: var( --color-neutral-10 );
		}
	}
}

.post-editor__switch-mode .segmented-control__link {
	background: var( --color-neutral-0 );
	border-color: var( --color-neutral-10 );
}

.post-editor__switch-mode .segmented-control__item.is-selected .segmented-control__link {
	border-color: var( --color-neutral-10 );
	border-bottom-color: var( --color-border-inverted );
	background-color: var( --color-surface );
}

.post-editor__header-divider {
	background-color: var( --color-neutral-5 );
	max-width: 700px;
	margin: 0 auto;

	& ~ .mce-tinymce {
		margin-top: -1px;
	}
}

.post-editor .drafts__list + .list-end::after {
	background-color: var( --color-neutral-0 );
}

.post-editor .draft {
	padding: 16px;
}

.post-editor__content-editor .editor-featured-image {
	display: none;
	border-bottom: 1px solid var( --color-neutral-10 );
	border-top: 1px solid var( --color-neutral-10 );
	box-shadow: inset 0 0 2px 2px rgba( var( --color-neutral-20-rgb ), 0.1 );
	background: rgba( var( --color-neutral-0-rgb ), 0.3 );

	overflow: hidden;

	&.is-assigned {
		display: block;
		padding: 12px 0 18px; /* Make room for the RemoveButton */

		@include breakpoint-deprecated( '>660px' ) {
			margin: -24px 0 24px;
		}
	}

	img {
		margin: 0 auto;
		max-height: 400px;
	}
}
